<template>
    <div>
        <h1>添加新的商品</h1>
        <hr>
        <!-- 上传内容 -->
        <div class="main">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="店铺名称" prop="name" class="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
           <el-form-item label="活动区域">
                <el-select v-model="ruleForm.region" placeholder="请选择婚纱类型" >
                <!-- <div class="jt" style=" width: 0;height: 0;border: 10px solid; border-color: transparent transparent  gainsboro ;"></div> -->
                <div  style=" background-color: gainsboro; width: 20%;">
                    <el-option label="中式婚纱" value="shanghai"></el-option>
                    <el-option label="西式婚纱" value="beijing"></el-option>
                    <el-option label="个性婚纱" value="beijing"></el-option>
                </div>
               
                </el-select>
            </el-form-item>
            <!-- 图片上传 -->
           <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <el-form-item label="商品详情信息" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item> -->
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
          data() {
            return {
                ruleForm: {
                name: '',
                region: '',
                desc: ''
                },
        rules: {
          name: [
            { required: true, message: '请输入店铺名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择婚纱类型', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写商品详情信息', trigger: 'blur' }
          ]
        },
       
      };
    },
    methods: {
         handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePreview(file) {
        // console.log(file);
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
    
</script>

<style lang="scss" scoped>
.main{
    margin: 50px;
    .name{

        color: black;
        font-size: 20px;
       
    }
}
</style>